import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import Book from '../views/Book.vue'
import Catalog_main from '../views/catalog/main.vue'
import Category from '../views/catalog/category.vue'
import Product from '../views/catalog/product.vue'
import ItemById from '../views/catalog/item.vue'
import NewItem from '../views/catalog/newItem.vue'
import Login from '../views/account/login.vue'
import Register from '../views/account/register.vue'
import UpdateInfo from '../views/account/update_info.vue'
import cart from '../views/catalog/cart.vue'
import confirmCheckOutForm from '../views/order/confirmCheckOutForm.vue'
import checkOut from '../views/order/checkOutForm.vue'
import viewOrder from '../views/order/viewOrder.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  },
  {
    path: '/book',
    name: 'Book',
    component: Book
  },
  {
    path: '/catalog/main',
    name: 'Catalog_main',
    component: Catalog_main
  },
  {
    path: '/catalog/main/:CategoryId',
    name: 'CategoryId',
    component: Category
  },
  {
    path: '/catalog/products/:ProductId/items',
    name: 'ProductId',
    component: Product
  },
  {
    path: '/catalog/product/ll',
    name: 'ItemById',
    components: ItemById
  },
  {
    path: '/catalog/newitem/:ItemId',
    name: 'ItemId',
    component: NewItem
  },
  {
    path: '/account/login',
    name: 'Login',
    component: Login
  },
  {
    path: '/account/register',
    name: 'Register',
    component: Register
  },{
    path: '/account/view_info/:uid',
    name: 'UpdateInfo',
    component: UpdateInfo
  },{
    path: '/cart/viewCart',
    name: 'cart',
    component: cart
  },{
    path: '/order/completeCheckOutForm',
    name: 'checkOut',
    component: confirmCheckOutForm
  },{
    path: '/cart/checkOut',
    name: 'checkOut',
    component: checkOut
  },{
    path: '/order/viewOrder',
    name: 'viewOrder',
    component: viewOrder
  }

]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router
